<template>
  <DatePicker v-bind="mainCfg" v-on="listener">
    <slot></slot>
  </DatePicker>
</template>

<script>
import * as dayjs from "dayjs";

export default {
  mixins: [],
  components: {},
  props: {
    value: {},
  },
  watch: {
    value: {
      immediate: true,
      handler() {
        if (this.value && typeof this.value === "string") {
          this.showValue = dayjs(this.value).toDate();
        } else {
          this.showValue = this.value;
        }
      },
    },
  },
  computed: {
    mainCfg() {
      let cfg = Object.assign({}, this.$attrs, {
        value: this.showValue,
      });
      return cfg;
    },
    listener() {
      let action = Object.assign({}, this.$listeners, {
        "on-change": this.handleChange,
      });
      return action;
    },
  },
  data() {
    return {
      showValue: "",
    };
  },
  methods: {
    handleChange(value, b) {
      this.showValue = value;
      this.$emit("on-change", value, b);
    },
  },
  mounted() {},
  created() {},
  //2.2新增 在组件内定义 指定父组件调用时候的传值属性和事件类型 这个牛逼
  model: {
    prop: "value",
    event: "on-change",
  },
};
</script>

<style lang="scss" scoped></style>
